<template>
  <div class="vistor_container">
    <!-- 就诊人卡片顶部 -->
    <div class="top">
      <div class="left">
        <div class="free">{{ visitor.isInsure == 0 ? "医保" : "自费" }}</div>
        <div class="visitorname">{{ visitor.name }}</div>
      </div>
      <div class="right">
        <!-- 编辑按钮 -->
        <el-button type="primary" :icon="Edit" circle @click="handlerVisitor" />
        <!-- 删除按钮 -->
        <el-popconfirm
          @confirm="deleteVisitor"
          width="200px"
          :title="`你确定要删除${visitor.name}`"
        >
          <template #reference>
            <el-button
              v-if="route.path == '/user/patient'"
              type="danger"
              :icon="Delete"
              circle
            />
          </template>
        </el-popconfirm>
      </div>
    </div>
    <!-- 就诊人卡片底部 -->
    <div class="bottom">
      <p>证件类型 : {{ visitor.param.certificatesTypeString }}</p>
      <p>证件号码 : {{ visitor.certificatesNo }}</p>
      <p>用户性别 : {{ visitor.sex == 0 ? "女生" : "男士" }}</p>
      <p>出生日期 ：{{ visitor.birthdate }}</p>
      <p>手机号码 ：{{ visitor.phone }}</p>
      <p>婚姻状况 : {{ visitor.isMarry == 0 ? "未婚" : "已婚" }}</p>
      <p>当前住址 : {{ visitor.param.cityString }}</p>
      <p>详细地址 ：{{ visitor.param.fullAddress }}</p>
      <!-- 已选择部分 -->
      <transition name="confirm">
        <div class="confirm" v-if="index === currentIndex && index >= 0">
          已选择
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit } from "@element-plus/icons-vue";
// 引入API
import { reqDeleteUser } from "@/api/user/index";
// 引入路由
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
// 获取路由对象
let route = useRoute();
let router = useRouter();
// 接收父组件传递过来的值
let props = defineProps(["visitor", "index", "currentIndex"]);
// 接收父组件传递过来的自定义事件
let $emit = defineEmits(["changeScene", "deleteVisitor"]);
// 就诊人组件中编辑按钮的回调
const handlerVisitor = () => {
  if (route.path == "/user/patient") {
    $emit("changeScene", props.visitor);
  } else {
    router.push({
      path: "/user/patient",
      query: { type: "edit", id: props.visitor.id },
    });
  }
};
// 删除就诊人按钮的回调
const deleteVisitor = async () => {
  try {
    // 删除就诊人成功
    await reqDeleteUser(props.visitor.id);
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    $emit("deleteVisitor");
  } catch (err) {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>

<style scoped lang="scss">
.vistor_container {
  margin: 5px;
  box-shadow: 0 0 5px 5px #f1eeee;

  .top {
    height: 60px;
    background-color: #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      margin-left: 20px;
      display: flex;
      align-items: center;

      .free {
        font-size: 13px;
        background-color: white;
        padding: 4px;
        text-align: center;
        border-radius: 5px;
      }

      .visitorname {
        font-size: 16px;
        margin-left: 5px;
        color: #7f7f7f;
      }
    }

    .right {
      margin-right: 20px;
    }
  }

  .bottom {
    padding: 20px;
    position: relative;
    p {
      height: 35px;
      font-size: 16px;
    }
    .confirm {
      position: absolute;
      width: 220px;
      height: 220px;
      line-height: 220px;
      color: red;
      border: 1px dashed red;
      border-radius: 50%;
      text-align: center;
      left: 12%;
      top: 20%;
      rotate: (35deg);
      opacity: 0.4;
    }
    .confirm-enter-from {
      scale: 1.2;
    }
    .confirm-enter-active {
      transition: all 0.3s;
    }
    .confirm-enter-to {
      scale: 1;
    }
  }
}
</style>
